<script>
//2024/05/01 猫燐
//编辑角色数据内部组件
import { cfg } from "@/cfg/cfg.js";
import axios from "axios";

export default {
  mounted() {
    this.func.load_role();
  },
  setup() {
    //加载msg组件
    if (cfg.msg == undefined) {
      cfg.msg = useMessage();
    }

    let val = reactive({
      newrole: false,
      loading: true,
      count: 10,
      page: 0,
      new: {},
      role: [],
    });

    let func = reactive({
      onc: (data) => {
        console.log(data);
        cfg.msg.success(`${data}`, { duration: 2e3 });
      },
      push_role() {
        axios
          .get(`${cfg.url}`, {
            params: {
              t: "get/gt/push_role",
              data: val.new,
              authkey: cfg.user?.authkey,
            },
          })
          .then((res) => {
            const data = res.data;
            cfg.msg.info(data.msg, { duration: 2e3 });
            if (data.code == 0) {
              //val.new浅拷贝
              let newdata = JSON.parse(JSON.stringify(val.new));
              newdata._id = {
                $oid: data.data,
              };
              val.role.unshift(newdata);
              val.newrole = false;
            }
          })
          .catch((err) => {});
      },
      load_role() {
        val.loading = true;
        axios
          .get(`${cfg.url}`, {
            params: {
              t: "get/gt/role",
              type: "all",
            },
          })
          .then((res) => {
            const data = res.data;
            data?.forEach((data2, key2) => {
              data[key2].yc = data[key2].yc?.toString();
              data[key2].yc2 = data[key2].yc2?.toString();
            });
            val.role = val.role.concat(data);
            val.loading = false;
          })
          .catch((err) => {});
      },
      new_role: () => {
        val.new = {
          px: "0",
        };
        val.newrole = true;
      },
      upval: (id, name, value) => {
        //更新数据
        axios
          .get(`${cfg.url}`, {
            params: {
              t: "get/gt/upd_role",
              id: id,
              name: name,
              value: value,
              authkey: cfg.user?.authkey,
            },
          })
          .then((res) => {
            let data = res.data;
            cfg.msg.success(`${value} , ${data.msg}`, { duration: 2e3 });
          })
          .catch((err) => {});
      },
    });
    const set = {
      form_span: "width:160px;text-align: center;display: inline-block;",
      form_input: "width:160px;",
    };

    return {
      cfg,
      val,
      func,
      set,
    };
  },
};
</script>

<template>
  <n-spin :show="val.loading">
    <n-space>
      <n-button type="warning" @click="func.new_role()">添加新角色</n-button>
    </n-space>
    <n-hr />

    <div v-if="val.newrole == true">
      <div class="workbg">
        <n-h3>创建新角色</n-h3>

        <n-scrollbar x-scrollable>
          <div style="width: 2500px">
            <n-space>
              <span :style="set.form_span">排序值</span>
              <span :style="set.form_span">名称</span>
              <span :style="set.form_span">简称</span>
              <span :style="set.form_span">图标名称.png</span>
              <span :style="set.form_span">本专异常值</span>
              <span :style="set.form_span">本专异常类型</span>
              <span :style="set.form_span">二专异常值</span>
              <span :style="set.form_span">二专异常类型</span>
              <span :style="set.form_span">百宝袋ID</span>
              <span :style="set.form_span">属性</span>
            </n-space>
            <n-hr />
            <n-form
              ref="formRef"
              label-placement="left"
              label-width="auto"
              require-mark-placement="right-hanging"
            >
              <n-form-item>
                <n-space>
                  <n-input :style="set.form_input" v-model:value="val.new.px"></n-input>
                  <n-input :style="set.form_input" v-model:value="val.new.name"></n-input>
                  <n-select
                    :style="set.form_input"
                    v-model:value="val.new.bname"
                    placeholder="输入，按回车确认"
                    :show-arrow="false"
                    :show="false"
                    filterable
                    multiple
                    tag
                  />
                  <n-input :style="set.form_input" v-model:value="val.new.icon"></n-input>
                  <n-input :style="set.form_input" v-model:value="val.new.yc"></n-input>
                  <n-input :style="set.form_input" v-model:value="val.new.ycl"></n-input>
                  <n-input :style="set.form_input" v-model:value="val.new.yc2"></n-input>
                  <n-input :style="set.form_input" v-model:value="val.new.ycl2"></n-input>
                  <n-input :style="set.form_input" v-model:value="val.new.bfid"></n-input>
                  <n-input :style="set.form_input" v-model:value="val.new.shu"></n-input>
                </n-space>
              </n-form-item>
              <n-hr style="margin-top: -7px" />
            </n-form>
          </div>
        </n-scrollbar>
        <n-button @click="func.push_role">添加新角色</n-button>
      </div>
      <br />
    </div>

    <div class="workbg">
      <n-h3>角色库列表</n-h3>
      <n-scrollbar x-scrollable>
        <div style="width: 2500px">
          <n-space>
            <span :style="set.form_span">排序值</span>
            <span :style="set.form_span">名称</span>
            <span :style="set.form_span">简称</span>
            <span :style="set.form_span">图标名称.png</span>
            <span :style="set.form_span">本专异常值</span>
            <span :style="set.form_span">本专异常类型</span>
            <span :style="set.form_span">二专异常值</span>
            <span :style="set.form_span">二专异常类型</span>
            <span :style="set.form_span">百宝袋ID</span>
            <span :style="set.form_span">属性</span>
            <span :style="set.form_span">星级</span>
            <span :style="set.form_span">晋升</span>
          </n-space>
          <n-hr />

          <n-virtual-list
            style="max-height: 350px"
            :item-size="42"
            item-resizable
            :items="val.role"
          >
            <template #default="{ item, index }">
              <n-form-item>
                <n-space>
                  <n-input
                    @blur="func.upval(item._id?.['$oid'], 'px', item.px)"
                    :style="set.form_input"
                    v-model:value="item.px"
                  ></n-input>
                  <n-input
                    :style="set.form_input"
                    @blur="func.upval(item._id?.['$oid'], 'name', item.name)"
                    v-model:value="item.name"
                  ></n-input>
                  <n-select
                    :style="set.form_input"
                    v-model:value="item.bname"
                    placeholder="输入，按回车确认"
                    :show-arrow="false"
                    :show="false"
                    filterable
                    multiple
                    tag
                    @update:value="func.upval(item._id?.['$oid'], 'bname', item.bname)"
                  />
                  <n-input
                    :style="set.form_input"
                    @blur="func.upval(item._id?.['$oid'], 'icon', item.icon)"
                    v-model:value="item.icon"
                  ></n-input>
                  <n-input
                    :style="set.form_input"
                    @blur="func.upval(item._id?.['$oid'], 'yc', item.yc)"
                    v-model:value="item.yc"
                  ></n-input>
                  <n-input
                    :style="set.form_input"
                    @blur="func.upval(item._id?.['$oid'], 'ycl', item.ycl)"
                    v-model:value="item.ycl"
                  ></n-input>
                  <n-input
                    :style="set.form_input"
                    @blur="func.upval(item._id?.['$oid'], 'yc2', item.yc2)"
                    v-model:value="item.yc2"
                  ></n-input>
                  <n-input
                    :style="set.form_input"
                    @blur="func.upval(item._id?.['$oid'], 'ycl2', item.ycl2)"
                    v-model:value="item.ycl2"
                  ></n-input>
                  <n-input
                    :style="set.form_input"
                    @blur="func.upval(item._id?.['$oid'], 'bfid', item.bfid)"
                    v-model:value="item.bfid"
                  ></n-input>
                  <n-input
                    :style="set.form_input"
                    @blur="func.upval(item._id?.['$oid'], 'shu', item.shu)"
                    v-model:value="item.shu"
                  ></n-input>

                  <n-input
                    :style="set.form_input"
                    @blur="func.upval(item._id?.['$oid'], 'star', item.star)"
                    v-model:value="item.star"
                  ></n-input>

                  <n-input
                    :style="set.form_input"
                    @blur="func.upval(item._id?.['$oid'], 'jin', item.jin)"
                    v-model:value="item.jin"
                  ></n-input>
                </n-space>
              </n-form-item>
              <n-hr style="margin-top: -7px" />
            </template>
          </n-virtual-list>
        </div>
      </n-scrollbar>
    </div>
    <template #description>加载角色中...</template>
  </n-spin>
</template>
